<style>
/*Back to top button */
#back-top{
position:fixed;
bottom:30px;
right: 60px; /*смещение на середину экрана*/
display: none; /*сначала скроем её*/
}
#back-top a{
width:64px;
display:block;
text-align:center;
font:11px/100% Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-decoration:none;
color:#bbb;
/*при наведении мышки меняем фон медленно*/
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
/*при наведении мышки делаем фон черным*/
#back-top a:hover{
color:#000;
}
#back-top span{
width:64px;
height:64px;
display:block;
margin-bottom:7px;
background:#ddd url(images/up-arrow1.png) no-repeat center center;
/* скругляем углы */
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
/*при наведении мышки меняем фон медленно*/
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
#back-top a:hover span{background-color:#777}
</style>
<script type="text/javascript">
$(document).ready(function(){
// прячем кнопку #back-top
$("#back-top").hide();
// появление/затухание кнопки #back-top
$(function (){
$(window).scroll(function (){
if ($(this).scrollTop() > 100){
$('#back-top').fadeIn();
} else{
$('#back-top').fadeOut();
}
});
// при клике на ссылку плавно поднимаемся вверх
$('#back-top a').click(function (){
$('body,html').animate({
scrollTop:0
}, 800);
return false;
});
});
});
</script>
<p id="back-top">
<a href="#top"><span></span>Вверх</a>
</p>
|
Вверх
|